<template>
  <div class="bodys">
    <div class="home-title" :style="{ boxShadow: isShowBoxShadow ? '0 4px 10px 0 rgba(220, 223, 230, 0.5)' : '' }">
      <div class="left">
        <div class="logo"><img :src="LogoSrc" alt="" /></div>
        <div class="route-title">
          <div
            v-for="(item, i) in routeList"
            @click="
              changeRoute(
                i,
                item.path,
                item.path === '/quote-price' || item.path === '/combo-price' || item.path === '/home/index' ? false : true
              )
            "
            @mouseover="changeSelect(i)"
            @mouseleave="
              () => {
                selectIndex = -1;
                activeIndex = -1;
              }
            "
            :key="i"
            class="titles"
            :class="{ active: ($route.path.includes(item.path) && item.path) || activeIndex == i }"
          >
            <!-- :class="{ active: activeIndex == i && $route.path.includes(item.path) }" -->
            {{ item.name }}
            <div v-if="i === 1 && selectIndex == 1" class="down">
              <el-icon>
                <arrow-down-bold />
              </el-icon>
            </div>
            <div v-if="i === 1 && selectIndex != 1" class="up">
              <el-icon>
                <arrow-up-bold />
              </el-icon>
            </div>
            <div v-if="activeIndex == i" class="line"></div>
            <template v-if="i === 1">
              <el-collapse-transition>
                <div v-show="i === 1 && selectIndex == 1" style="position: absolute; top: 50px; width: 100vw; left: -203px">
                  <SelectDown :setHight="selectIndex"></SelectDown>
                </div>
              </el-collapse-transition>
            </template>
          </div>
        </div>
      </div>
      <div class="right">
        <!-- <el-dropdown trigger="click" :hide-on-click="false" class="mr40">
          <span class="el-dropdown-link f12">
            <b>帮助导航</b><el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item class="f12" @click="changeRoute(99, '/help-center')">帮助中心</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown> -->
        <!-- <div class="about">关于我们</div> -->
        <div class="opinion" @click="changeRoute(-99, 'toPath;')">管理后台</div>
        <div class="opinion" @click="openFeedback">意见反馈</div>
        <Feedback :optionInfo="optionInfo" @close="closeFeedback" />
        <!-- <div class="books">
          <img src="../imgs/book.png" style="width: 24px; height: 24px" alt="" />
        </div>
        <div class="shopCar">
          <img src="../imgs/shopCar.png" style="width: 24px; height: 24px" alt="" />
        </div> -->
        <div class="user jzt-cursor-point" @click="$router.push({ path: '/manage/orderlist' })">
          <div class="userName">{{ userName }}</div>
          <!-- <el-avatar :size="sizeO" :src="circleUrl"></el-avatar> -->
          <el-icon style="margin-left: 5px">
            <arrow-down-bold />
          </el-icon>
        </div>
      </div>
    </div>
  </div>
  <router-view></router-view>
</template>

<script>
import SelectDown from "@/views/home/components/selectDown.vue";
import { getLogo } from "@/apis/shopHome/home";
import Feedback from "@/views/feedback";
import logoUrl from "@/assets/images/logo.png";
import useUserStore from "@/store/modules/user";
import { getLocalJsonCache } from "@/utils/cache";

export default {
  components: { SelectDown, Feedback },
  name: "hearderTop",
  props: {
    pageList: {
      default: {}
    },
    isShowBoxShadow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      routeList: [
        {
          name: "首页",
          path: "/home/index"
        },
        {
          name: "全部商品类型",
          path: ""
        },
        // {
        //   name: "定制报价",
        //   path: ""
        // },
        // {
        //   name: "套餐选择 ",
        //   path: ""
        // },
        // {
        //   name: "设计需求",
        //   path: ""
        // },
        {
          name: "预算报价",
          path: "/quote-price"
        },
        // {
        //   name: "随心搭套餐",
        //   path: "/combo-price"
        // },
        {
          name: "设计需求表",
          path: "toPath;designForm"
        }
      ],
      optionInfo: { isShow: false },
      LogoSrc: logoUrl,
      activeIndex: -1,
      selectIndex: -1,
      sizeO: "small",
      isChainTenant: JSON.parse(localStorage.getItem("userinfo")).isChainTenant, // 是否是加盟商
      logoIcon: getLocalJsonCache("logoIcon") // 加盟商设置的logo icon titile
    };
  },
  mounted() {
    getLogo()
      .then(res => {
        this.LogoSrc =
          this.isChainTenant && this.logoIcon.mallWebpageIconUrl
            ? this.logoIcon.mallWebpageIconUrl
            : res.data?.logoUrl
              ? res.data?.logoUrl
              : logoUrl;
      })
      .catch(() => {});
  },
  computed: {
    userName() {
      return useUserStore().userInfo.nickName;
    },
    circleUrl() {
      return useUserStore().userInfo.avatar;
    }
  },
  methods: {
    openFeedback() {
      this.optionInfo.isShow = true;
    },
    closeFeedback() {
      this.optionInfo.isShow = false;
    },
    changeRoute(i, path, blank = false) {
      if (i == 1) return;

      if (path?.includes("toPath")) {
        const url = window.location.host + "/" + path?.split(";")[1];
        window.open("http://" + url, "_blank");
      } else {
        if (blank) {
          const routeUrl = this.$router.resolve({
            path: path
          });
          window.open(routeUrl.href, "_blank");
        } else {
          this.$router.push({
            path: path
          });
        }
        this.activeIndex = i;
      }
    },
    changeSelect(i) {
      this.selectIndex = i;
      this.activeIndex = i;
    }
  }
};
</script>
<style scoped lang="scss">
@use "@/assets/styles/mixin";

.filter-wrap {
  position: absolute;
  top: 0;
  width: 100%;
  height: 300px;
}

:deep(.el-dropdown-link) {
  &:hover {
    cursor: pointer;
  }

  &:focus-visible {
    outline: none;
  }
}

.bodys {
  position: relative;
  z-index: 999;
}

.home-title {
  @include mixin.flex-between;
  position: fixed;
  top: 0;
  width: max(1440px, 100%);
  height: 50px;
  margin: 0 auto;
  background-color: #ffffff;
  // box-shadow: 0 4px 10px 0 rgba(220, 223, 230, 0.5);

  .left {
    @include mixin.flex-align;
    height: 100%;
    padding-left: 20px;

    .logo {
      width: 40px;
      height: 40px;
      margin-right: 40px;
      font-weight: 400;
      font-size: 24px;
      color: #1a1a1a;
      line-height: 36px;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
        // border-radius: 50%;
      }
    }

    .route-title {
      @include mixin.flex-align;
      position: relative;
      height: 100%;

      .titles {
        @include mixin.flex-center;
        position: relative;
        height: 100%;
        padding: 0 33px;
        font-weight: 700;
        font-size: 14px;
        color: #86909c;
        cursor: pointer;
        line-height: 18px;

        .down {
          @include mixin.flex-align;
          font-weight: 700;
          font-size: 14px;
          margin-left: 10px;
        }

        .up {
          @include mixin.flex-align;
          font-weight: 700;
          font-size: 14px;
          margin-left: 10px;
        }

        &.active {
          color: #041830;
        }

        &.active::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 4px;
          background: #041830;
        }
      }
    }
  }

  .right {
    @include mixin.flex-center;
    margin-right: 20px;
    font-weight: 400;
    font-size: 12px;
    color: #86909c;
    line-height: 16px;

    :deep(.el-dropdown-link) {
      @include mixin.flex-align;
      color: #86909c;
      height: 16px;

      b {
        font-weight: normal;
      }
    }

    .about {
      margin-right: 40px;
    }

    .opinion {
      margin-right: 40px;
      cursor: pointer;
    }

    .books {
      margin-right: 20px;
    }

    .shopCar {
      margin-right: 16px;
    }

    .user {
      @include mixin.flex-center;

      .userName {
        margin-right: 5px;
        font-weight: 400;
        font-size: 14px;
        color: #4e5969;
        line-height: 24px;
      }
    }
  }
}
</style>
